import { Swiper } from "antd-mobile";
import React from "react";
import { useNavigate } from "react-router-dom";

function Index() {
  const navigate=useNavigate()
  //跳转到火车首页
  const goTrain=()=>{
navigate('/train')
  }
  return (
    <div style={{width:'100vw',height:'100vh'}}>
      {/* 滑动单元格 */}
      <Swiper  loop>
        <Swiper.Item>
          <img
            src="/public/1.jpg"
            alt=""
           style={{ width: "70px", height: "70px" }}
          />
          <img
            src="/public/1-02.jpg"
            alt=""
          style={{ width: "70px", height: "70px" }}
          />
          <img
            src="/public/1-03.jpg"
            alt=""
          style={{ width: "70px", height: "70px" }}
          onClick={goTrain}
          />
          <img
            src="/public/1-04.jpg"
            alt=""
          style={{ width: "70px", height: "70px" }}
          />
          <img
            src="/public/1-05.jpg"
            alt=""
         style={{ width: "70px", height: "70px" }}
          />

            <img
            src="/public/1-06.jpg"
            alt=""
           style={{ width: "70px", height: "70px" }}
          />
          <img
            src="/public/1-07.jpg"
            alt=""
          style={{ width: "70px", height: "70px" }}
          />
          <img
            src="/public/1-08.jpg"
            alt=""
          style={{ width: "70px", height: "70px" }}
          />
          <img
            src="/public/1-09.jpg"
            alt=""
          style={{ width: "70px", height: "70px" }}
          />
          <img
            src="/public/1-10.jpg"
            alt=""
         style={{ width: "70px", height: "70px" }}
          />
        </Swiper.Item>
        <Swiper.Item>
          <img
            src="/public/1-06.jpg"
            alt=""
           style={{ width: "70px", height: "70px" }}
          />
          <img
            src="/public/1-07.jpg"
            alt=""
          style={{ width: "70px", height: "70px" }}
          />
          <img
            src="/public/1-08.jpg"
            alt=""
          style={{ width: "70px", height: "70px" }}
          />
          <img
            src="/public/1-09.jpg"
            alt=""
          style={{ width: "70px", height: "70px" }}
          />
          <img
            src="/public/1-10.jpg"
            alt=""
         style={{ width: "70px", height: "70px" }}
          />

          <img
            src="/public/1.jpg"
            alt=""
           style={{ width: "70px", height: "70px" }}
          />
          <img
            src="/public/1-02.jpg"
            alt=""
          style={{ width: "70px", height: "70px" }}
          />
          <img
            src="/public/1-03.jpg"
            alt=""
          style={{ width: "70px", height: "70px" }}
          />
          <img
            src="/public/1-04.jpg"
            alt=""
          style={{ width: "70px", height: "70px" }}
          />
          <img
            src="/public/1-05.jpg"
            alt=""
         style={{ width: "70px", height: "70px" }}
          />

        </Swiper.Item>
      </Swiper>

      {/* 轮播图 */}
      <Swiper autoplay loop>
         <Swiper.Item>
          <img style={{width:'100%',height:'200px'}}  src="https://tse1-mm.cn.bing.net/th/id/OIP-C.pe6ZublTUMSwBPAo9bWLLwHaEo?w=290&h=181&c=7&r=0&o=5&dpr=1.8&pid=1.7" alt="" />
          
        
         </Swiper.Item>
           <Swiper.Item>
         
          <img style={{width:'100%',height:'200px'}} src="https://tse2-mm.cn.bing.net/th/id/OIP-C.06VHlUZHJfm0CjpVxlFzMwHaHa?w=176&h=180&c=7&r=0&o=5&dpr=1.8&pid=1.7" alt="" />
        
         </Swiper.Item>
          <Swiper.Item>
         
        
          <img style={{width:'100%',height:'200px'}} src="https://tse1-mm.cn.bing.net/th/id/OIP-C.StrDRqennoZNbzSPZapKZwAAAA?w=316&h=180&c=7&r=0&o=5&dpr=1.8&pid=1.7" alt="" />
         </Swiper.Item>
      </Swiper>
    </div>
  );
}

export default Index;
